<template>
  <view class="container">
    <view class="section">
      <view class="section-title">护眼设置</view>
      
      <view class="setting-item">
        <text>自动调节亮度</text>
        <switch 
          :checked="settings.autoBrightness" 
          @change="toggleAutoBrightness"
        />
      </view>
      
      <view class="setting-item">
        <text>护眼模式亮度</text>
        <slider 
          :value="settings.eyeProtectBrightness" 
          min="10" 
          max="80"
          show-value
          @change="changeEyeProtectBrightness"
        />
      </view>
    </view>

    <view class="section">
      <view class="section-title">提醒设置</view>
      
      <view class="setting-item">
        <text>震动提醒</text>
        <switch 
          :checked="settings.vibrateEnabled" 
          @change="toggleVibrate"
        />
      </view>
      
      <view class="setting-item">
        <text>声音提醒</text>
        <switch 
          :checked="settings.soundEnabled" 
          @change="toggleSound"
        />
      </view>
      
      <view class="setting-item">
        <text>自动开启护眼模式</text>
        <picker 
          mode="time" 
          :value="settings.autoEyeProtectTime" 
          @change="onAutoTimeChange"
        >
          <view class="picker">
            {{ settings.autoEyeProtectTime }}
          </view>
        </picker>
      </view>
    </view>

    <view class="section">
      <view class="section-title">关于</view>
      <view class="about-item">
        <text>版本</text>
        <text class="version">1.0.0</text>
      </view>
      <view class="about-content">
        <text class="about-text">护眼助手致力于保护您的眼睛健康,通过智能调节屏幕亮度、定时提醒等功能,帮助您养成良好的用眼习惯。</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settings: {
        autoBrightness: false,
        eyeProtectBrightness: 40,
        vibrateEnabled: true,
        soundEnabled: true,
        autoEyeProtectTime: '21:00'
      }
    }
  },
  onLoad() {
    // 从本地存储加载设置
    const settings = uni.getStorageSync('eyeProtectSettings')
    if (settings) {
      this.settings = JSON.parse(settings)
    }
  },
  methods: {
    saveSettings() {
      uni.setStorageSync('eyeProtectSettings', JSON.stringify(this.settings))
    },
    toggleAutoBrightness(e) {
      this.settings.autoBrightness = e.detail.value
      this.saveSettings()
    },
    changeEyeProtectBrightness(e) {
      this.settings.eyeProtectBrightness = e.detail.value
      this.saveSettings()
    },
    toggleVibrate(e) {
      this.settings.vibrateEnabled = e.detail.value
      this.saveSettings()
    },
    toggleSound(e) {
      this.settings.soundEnabled = e.detail.value
      this.saveSettings()
    },
    onAutoTimeChange(e) {
      this.settings.autoEyeProtectTime = e.detail.value
      this.saveSettings()
      
      // 设置定时任务
      if (this.settings.autoEyeProtectTime) {
        uni.showToast({
          title: '已设置自动护眼时间',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

.section {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 4rpx solid #3cc51f;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
}

.picker {
  color: #3cc51f;
}

.about-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
}

.version {
  color: #999;
}

.about-content {
  padding: 20rpx 0;
}

.about-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
</style>